<template>
	<div class="header">
		<div class="logo">
			<el-avatar
				style="float: left; margin-right: 10px"
				:size="44"
				src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
			></el-avatar>
			{{ app.hostName }}
		</div>
		<div class="tab">
			<ul>
				<li :class="[activeName == 'dashboard' ? 'active' : '']">
					<router-link to="/" tag="div">控制台</router-link>
				</li>
				<li
					v-for="(item, index) in tabs"
					:key="index"
					:class="[activeName == item.alias ? 'active' : '']"
				>
					<router-link :to="{ name: item.defaulturl }" tag="div">
						{{ item.name }}
					</router-link>
				</li>
			</ul>
		</div>
		<div class="avatar">
			<el-dropdown @command="toggleTheme">
				<span class="el-dropdown-link">
					{{ themeObj.name }}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item
						v-for="item in themeList"
						:key="item.code"
						:command="item.code"
					>
						{{ item.name }}
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-popover placement="bottom" width="150" trigger="hover">
				<div class="popover">
					<li>版本号：v1.0.0</li>
					<li>{{ user.userInfo.nickname }}</li>
					<li><a @click="toLogout">退出登录</a></li>
				</div>
				<el-avatar
					slot="reference"
					style="float: left; margin-right: 10px"
					:size="44"
					src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
				></el-avatar>
			</el-popover>
		</div>
	</div>
</template>

<script>
import { themeList } from '@/config/theme.js'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
	data() {
		return {
			activeName: '',
			tabs: [],
			themeList
		}
	},
	computed: {
		...mapState(['app', 'user']),
		...mapGetters(['authList']),
		themeObj() {
			return this.$_.find(this.themeList, { code: this.app.theme })
		}
	},
	props: {
		// isShow:{
		// 	type:Boolean,
		// 	default:true
		// }
	},
	watch: {
		$route(to, from) {
			this.headNav()
		}
	},
	mounted() {
		this.headNav()
	},
	methods: {
		...mapMutations('app', ['changeTheme', 'changeRefresh']),
		init() {},
		checkLogin() {},
		headNav() {
			let that = this
			let a = that.authList
			that.tabs = a
			that.activeName = that.$route.meta.leftNav
		},
		toLogout() {
			localStorage.removeItem('token')
			localStorage.removeItem('userinfo')
			this.changeRefresh(true)
			this.$router.push({ name: 'login' })
		},
		toggleTheme(color) {
			console.log(color, 'color')
			this.changeTheme(color)
		}
	}
}
</script>
<style lang="scss" scoped>
.header {
	width: calc(100% - 16px);
	height: 44px;
	padding: 8px 0;
	margin: 8px;
	border-radius: 4px;
	color: #dedede;
	font-size: 18px;
	.logo {
		width: 180px;
		line-height: 44px;
		height: 44px;
		padding-left: 20px;
		float: left;
		color: #fff;
	}
	.tab {
		width: calc(100% - 400px);
		height: 44px;
		float: left;
		ul {
			width: 100%;
			height: 44px;
			li {
				height: 42px;
				line-height: 44px;
				padding: 0 12px;
				float: left;
				font-size: 16px;
				color: #dedede;
				position: relative;
			}
			li:after {
				content: '';
				position: absolute;
				width: 0;
				height: 1px;
				background: #fff;
				bottom: 0;
			}
			li.active {
				color: #fff;
			}
			li.active:after {
				width: calc(100% - 24px);
			}
			li:hover {
				color: #fff;
				background: rgba(255, 255, 255, 0.3);
			}
		}
	}
	.avatar {
		width: 200px;
		height: 44px;
		@include flex(row, flex-end, center);
		display: flex;
		.el-avatar {
			margin-left: 20px;
		}
	}
}
.popover {
	width: 100px;
	padding-left: 20px;
}
.popover li {
	width: 100px;
	line-height: 24px;
}
.el-dropdown-link {
	color: #fff;
}
</style>
